import { createRouter, createWebHistory } from "vue-router";
import List from "../views/List.vue";
import Detail from "../views/Detail.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "list",
      component: List,
    },
    {
      path: "/detail/:id",
      name: "detail",
      component: Detail,
    },
  ],
});

router.beforeEach((to, from, next) => {
  if (from.name === "detail" && to.name === "list") {
    document.documentElement.classList.add("back");
    const vt = document.startViewTransition(() => {
      next();
    });

    vt.finished.finally(() => {
      document.documentElement.classList.remove("back");
    });
  } else {
    next();
  }
});

export default router;
